<template>
  <div class="order-details">
    <el-card class="order-card">
      <h2 class="order-title">订单详情</h2>

      <el-divider></el-divider>
      <el-descriptions title="订单进度" border class="order-progress">
        <el-descriptions-item label="订单号">{{ orderDetail.orderId }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          {{
            orderDetail.status === 0 ? '无' :
                orderDetail.status === 1 ? '待支付' :
                    orderDetail.status === 2 ? '已支付' :
                        orderDetail.status === 3 ? '已关闭' :
                            orderDetail.status === 4 ? '已完成' :
                                orderDetail.status === 5 ? '已报名' :
                                    orderDetail.status === 6 ? '已申请退款' : '未知状态'
          }}
        </el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ orderDetail.createTime }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ orderDetail.updateTime }}</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-descriptions title="申请人信息" border class="applicant-info">
        <el-descriptions-item label="用户ID">{{ orderDetail.userId }}</el-descriptions-item>
        <el-descriptions-item label="用户名称">{{ orderDetail.createBy }}</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-descriptions title="订单信息" border class="order-info">
        <el-descriptions-item label="课程名称">{{ orderDetail.name }}</el-descriptions-item>
        <el-descriptions-item label="课程价格">{{ orderDetail.price }} 元</el-descriptions-item>
        <el-descriptions-item label="实付金额">{{ orderDetail.realPayAmount }} 元</el-descriptions-item>
        <el-descriptions-item label="折扣金额">{{ orderDetail.discountAmount }} 元</el-descriptions-item>
        <el-descriptions-item label="学习有效期">
          {{ orderDetail.valid_duration ? orderDetail.validDuration + ' 月' : '永久有效' }}
        </el-descriptions-item>
        <el-descriptions-item label="课程过期时间">{{ orderDetail.courseExpireTime }}</el-descriptions-item>
        <!-- 添加封面图片 -->
        <el-descriptions-item label="封面图片">
          <img :src="orderDetail.coverUrl" alt="封面图" class="cover-image" />
        </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-descriptions title="支付渠道" border class="payment-channel">
        <el-descriptions-item label="支付渠道名称">{{ orderDetail.payChannel }}</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-descriptions title="其他信息" border class="other-info">
        <el-descriptions-item label="处理人">{{ orderDetail.updateBy }}</el-descriptions-item>
        <el-descriptions-item label="退款状态">
          {{
            orderDetail.refundStatus === 1 ? '待审批' :
                orderDetail.refundStatus === 2 ? '取消退款' :
                    orderDetail.refundStatus === 3 ? '同意退款' :
                        orderDetail.refundStatus === 4 ? '拒绝退款' : '无退款状态'
          }}
        </el-descriptions-item>
        <el-descriptions-item label="优惠券ID">{{ orderDetail.couponId }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ElCard, ElDescriptions, ElDescriptionsItem, ElDivider } from 'element-plus';
import { getOrder_detail } from '@/api/order/order_detail.js'; // 确保路径正确

export default {
  components: {
    ElCard,
    ElDescriptions,
    ElDescriptionsItem,
    ElDivider
  },
  setup() {
    const orderDetail = ref({});
    const route = useRoute();

    onMounted(async () => {
      const id = Number(route.params.id);
      if (!isNaN(id)) {
        await fetchOrderDetail(id);
      } else {
        console.error('订单 ID 无效');
      }
    });

    const fetchOrderDetail = async (id) => {
      try {
        const response = await getOrder_detail(id);
        orderDetail.value = response.data;
      } catch (error) {
        console.error('获取订单详情失败:', error);
      }
    };

    return {
      orderDetail,
    };
  },
};
</script>

<style scoped>
.order-details {
  padding: 20px;
  background-color: #f5f5f5;
}

.order-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.order-title {
  margin-bottom: 10px;
  color: #333;
}

.el-divider--horizontal {
  margin: 15px 0;
}

.order-progress,
.applicant-info,
.order-info,
.payment-channel,
.other-info {
  margin-bottom: 20px;
}

.el-descriptions {
  background-color: #fafafa;
  border-color: #ebebeb;
}

.el-descriptions__label {
  color: #666;
  font-weight: 500;
}

.el-descriptions__content {
  color: #333;
}

.cover-image {
  max-width: 100px; /* 根据需要调整图片大小 */
  max-height: 100px;
  object-fit: cover;
  border-radius: 4px;
}
</style>
